import React, { useState } from 'react'
import { View, ImageBackground, Text, Image, TextInput, TouchableOpacity } from 'react-native'
import checkStyle from '../../css/checkStyle'

const CheckFirst = (props) => {
    const [phone, setPhone] = useState(''),
        [mail, setMail] = useState(''),
        [letter, setLetter] = useState(''),
        [address, setAddress] = useState('')

    const submit = () => {
        props.navigation.push('List')
    }
    return (
        <View style={checkStyle.contView}>
            <ImageBackground source={require('../../images/Manager.png')} style={checkStyle.image}/>
            <Text style={checkStyle.title}>福州</Text>
            <Text style={checkStyle.banner}>福建分公司</Text>
            <View style={checkStyle.inputView}>
                <Image source={require('../../images/01.png')} style={checkStyle.iconImg}/>
                <TextInput
                        style={checkStyle.textInput}
                        value={phone}
                        onChangeText={(phone) => {
                            setPhone({phone: phone})
                        }}
                        placeholder={'( 0591 ) 28486788'}
                        placeholderTextColor={'#a4b0b2'}
                        underlineColorAndroid={'transparent'}
                    />
               <TouchableOpacity style={checkStyle.btnTxt}>
                    <Text style={{ color: '#678CEF',  fontSize: 13}}>拨打电话</Text>
                </TouchableOpacity>
            </View>
            <View style={checkStyle.baseLine}/>
            <View style={checkStyle.inputView}>
                <Image source={require('../../images/02.png')} style={checkStyle.iconImg}/>
                <TextInput
                        style={checkStyle.textInput}
                        value={mail}
                        onChangeText={(mail) => {
                            setMail({mail: mail})
                        }}
                        placeholder={'fuzhou@sinosure.com.cn'}
                        placeholderTextColor={'#a4b0b2'}
                        underlineColorAndroid={'transparent'}
                    />
                <TouchableOpacity style={checkStyle.btnTxt}>
                    <Text style={{ color: '#678CEF',  fontSize: 13}}>复制邮箱</Text>
                </TouchableOpacity>
            </View>
            <View style={checkStyle.baseLine}/>
            <View style={checkStyle.inputView}>
                <Image source={require('../../images/03.png')} style={checkStyle.iconImg}/>
                <TextInput
                        style={checkStyle.textInput}
                        value={letter}
                        onChangeText={(letter) => {
                            setLetter({letter: letter})
                        }}
                        placeholder={'010-82759966'}
                        placeholderTextColor={'#a4b0b2'}
                        underlineColorAndroid={'transparent'}
                    />
            </View>
            <View style={checkStyle.baseLine}/>
            <View style={checkStyle.inputView}>
                <Image source={require('../../images/04.png')} style={checkStyle.iconImg}/>
                <TextInput
                        style={checkStyle.textInput}
                        value={address}
                        onChangeText={(address) => {
                            setAddress({address: address})
                        }}
                        placeholder={'福州市台北去振武路70号福晟钱隆广场25层'}
                        placeholderTextColor={'#a4b0b2'}
                        underlineColorAndroid={'transparent'}
                    />
            </View>
            <View style={checkStyle.baseLine}/>
            <TouchableOpacity style={checkStyle.subBtn} onPress={ submit }>
                <Text>选择营业机构</Text>
            </TouchableOpacity>
        </View>
    )
}
export default CheckFirst